<template>
<div>
    <div class="box">
        <el-row>
            <el-col :span="7">
                <p class="o-p">已选中数据表字段：</p>
                <vxe-table
                                show-overflow
                                size="mini"
                                ref="xTree1"
                                height="370px"
                                :show-header="false"
                                :tree-config="{}"
                                @cell-click="rowclick"
                                :data="LData">
                                <vxe-column field="title" tree-node></vxe-column>
                            </vxe-table>
            </el-col>
            <el-col :span="6">
                <p class="o-p" style="opacity: 0;">已</p>
                <div class="tpesun2-m-buttons">
                    <div class="t">
                        <span class="t1" @click="filterText=filterText+' + '">+</span>
                        <span class="t1" @click="filterText=filterText+' - '">-</span>
                        <span class="t1" @click="filterText=filterText+' * '">*</span>
                        <span class="t1" @click="filterText=filterText+' / '">/</span>
                        <span class="t1" @click="filterText=filterText+' > '">&gt;</span>
                        <span class="t1" @click="filterText=filterText+' >= '">&gt;=</span>
                        <span class="t1" @click="filterText=filterText+' = '">=</span>
                        <span class="t1" @click="filterText=filterText+' <= '">&lt;=</span>
                        <span class="t1" @click="filterText=filterText+' < '">&lt;</span>
                        <span class="t1" @click="filterText=filterText+' \'\' '">&quot;</span>
                        <span class="t1" @click="filterText=filterText+' () '">( )</span>
                        <span class="t1"  @click="filterText=filterText+' () '">&lt;&gt;</span>
                      </div>
                     <div class="t">
                       <span class="t2"  @click="filterText=filterText+' and '">并且</span>
                       <span class="t2"  @click="filterText=filterText+' or '">或者</span>
                       <span class="t2"  @click="filterText=filterText+' in() '">属于</span>
                       <span class="t2"  @click="filterText=filterText+' like \'%%\' '">形如</span>
                       <span class="t2"  @click="filterText=filterText+' not in () '">不属于</span>
                       <span class="t2"  @click="filterText=filterText+' not like \'%%\''">不满足</span>
                     </div>
                </div>
                <div class="buttonsm-view">
                    <div class="butv-t">函数内容</div>
                    <el-input
                        resize="none"
                        rows="4"
                        type="textarea"
                    />
                </div>
                <div class="Schoose-b">
                    <el-button size="small">表达式内容字符替换</el-button>
                </div>
            </el-col>
            <el-col :span="11">
                <p class="o-p">已选中数据表字段：{}当前表字段值</p>
                <vxe-table
                                show-overflow
                                ref="xTree1"
                                size="mini"
                                height="374px"
                                :show-header="false"
                                :tree-config="{}"
                                @cell-click="rowclick"
                                :data="RData">
                              <vxe-column field="title" tree-node></vxe-column>
                            </vxe-table>
            </el-col>
        </el-row>
    </div>
        <div class="SCb-title">表达式内容：</div>
        <el-input
                        resize="none"
                        rows="4"
                        type="textarea"
                        v-model="filterText"
                    />
  <div> <el-button size="small" v-for="item in sys_datagrid_params" @click="adddef(item.value)">{{ item.label }}</el-button></div>
        <div class="Schoose-b">
            <el-button @click="submit(true)">确定</el-button>
            <el-button  @click="submit(false)">取消</el-button>
        </div>
    </div>
</template>

<script>
import {ref, reactive, toRefs, getCurrentInstance} from "vue"
export default {
    props: ['LData','RData','Filter'],
    emits:["submit"],
    setup(props,ctx) {
      const {proxy} = getCurrentInstance();
      const {sys_datagrid_params} = proxy.useDict('sys_datagrid_params')
        let state = reactive({
            filterText:props.Filter,
            default:[]
        })
        const rowclick=({row})=>{
            if (row.isF){
                state.filterText=state.filterText+ row.title
            }
        }
        const adddef=(key)=>{
           state.filterText=state.filterText+ key
        }
        const submit=(tf)=>{
            let data={filterText:state.filterText,update:tf}
            ctx.emit("submit",data)
        }
        return{
            ...toRefs(state),
          adddef,sys_datagrid_params,
            submit,
            rowclick
        }
    }
}
</script>

<style scoped>
.box{
    border: 1px solid #d2d2d2;
}
.o-p{
    padding: 5px;
}
.tpesun2-m-buttons {
          border: 1px solid rgb(224, 224, 224);
          background-color: rgb(255, 255, 255);
          box-sizing: border-box;
          padding: 5px 10px;
          overflow: hidden;
          text-align: center;
}
.t{ display: inline-block;cursor: default; line-height: 34px;}
.t1{
            width: 34px;
            height: 34px;
            float: left;
            line-height: 34px;
            text-align: center;
            margin: 0 2px;
            background-color: rgba(196, 196, 196, 0.524);
            border: 1px solid rgb(145, 145, 145);
            border-radius: 2px;
          }

          .t2 {
            height: 24px;
            padding: 3px 2px;
            margin: 2px;
            line-height: 24px;
            text-align: center;
            background-color: rgba(196, 196, 196, 0.524);
            border: 1px solid rgb(145, 145, 145);
            border-radius: 2px;
          }
          .Schoose-b {
          text-align: center;
          line-height: 30px;
          margin-top: 10px;
        }
        .buttonsm-view{
                            margin-top: 10px;
                            width: 170px;
                            border: 1px solid rgb(255, 255, 255);
                            background-color: rgb(255, 255, 255);
                            padding-bottom: 3px;
                            
                        }
                        .butv-t{
                                padding: 5px;
                            }
                            .SCb-title{
                        line-height: 20px;
                        background-color: rgb(255, 255, 255);
                        font-size: 14px;
                        padding: 3px 5px;
                    }
</style>